<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html class="wrap">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>手机考勤 </title>


	<link rel="stylesheet" type="text/css" href="pc/css/cores/style.css" /><!--公共样式-->


	<link rel="stylesheet" type="text/css" href="pc/css/extends/list.css" /><!--翻页插件样式-->
	<link rel="stylesheet" type="text/css" href="pc/css/cores/alert.css" /><!--弹出盒样式-->
	<link rel="stylesheet" type="text/css" href="pc/css/cores/public.css" /><!--公共样式-->

	<%--<link rel="stylesheet" type="text/css" href="pc/css/modules/teacherClassManagement.css?f=<%=System.currentTimeMillis()%>" />--%>
	<style>
		input::-webkit-clear-button { visibility: hidden; }
		input[type=date]::-webkit-inner-spin-button { visibility: hidden }
		input[type=time]::-webkit-inner-spin-button{
			visibility: hidden
		}
		input[type=time]::-webkit-clear-button{ display:none; }
		input[type=date],input[type=time]{
			height: 34px;
			border: 1px solid #dfdfdf;
			border-radius: 5px;
			padding-left: 12px;
			font-size: 14px;
			padding-right: 7px;
			color: #333;
			line-height: 34px;
		}
		input[type=checkbox]{
			margin-right: 5px;
			vertical-align: -1px;
		}
		.count{
			padding: 20px;
		}
		.seld{
			width: 100px;
			height: 34px;
			border: 1px solid #dfdfdf;
			line-height: 34px;
			padding-left: 8px;

		}
		.submit{
			margin: 20px auto;
			background: #C82011;
			width: 100px;
			height: 34px;
			line-height: 34px;
			color: #fff;
			font-size: 16px;
			text-align: center;
			border-radius: 5px;
			cursor: pointer;

		}
		.place{
			background: #C82011;
			width: 90px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			color: #fff;
			font-size: 16px;
			border-radius: 5px;
			cursor: pointer;
			display: inline-block;
			margin-left:20px
		}
		.map{
			display: none;
			position: relative;
			margin-left: 20px;
		}
		#inputSearch{
			position: absolute;
			width: 210px;
			height: 35px;
			line-height: 35px;
			padding-left: 20px;
			z-index: 99;
			top: 20px;
		}

	</style>
	<script>
		function goPostDetails(id){
			var json = JSON.stringify({
				"pageName": "phone",
				"id":id
			});

			window.location.href = "skipPage?jsonStr=" + json;
		}
	</script>
</head>

<body>
<div class="crumbs">
	<div class="fl returnBox">&ensp;<img src="pc/images/ico_return.png" alt="返回按钮" />&ensp;
				<a class="looktg" href="javascript:;">返回上一页</a>
	</div>
	<div class="fl noticeBox"><img src="pc/images/ico_trumpet.png" />
		<div class="noticeBar">
			<ul>
				<li>当前暂无消息</li>
			</ul>
		</div>
	</div>
</div>
<div class="clear"></div>


<div class="mainContent" style="padding-bottom: 20px">
	<p>手机考勤设置</p>
	<p class="count"><span>手机考勤:&ensp;&ensp;&ensp;<input type="date" class="datestart"></span>&ensp;&ensp;
		<span>结束周期:&ensp;<input type="date" class="datesend"></span>
	</p>
	<p class="count">
		考勤星期:&ensp;&ensp;&ensp;
		        <label><input type="checkbox"  name="week" value="星期一">星期一</label>&ensp;&ensp;
	        	<label><input type="checkbox"  name="week" value="星期二">星期二</label>&ensp;&ensp;
			    <label><input type="checkbox"  name="week" value="星期三">星期三</label>&ensp;&ensp;
				<label><input type="checkbox"  name="week" value="星期四">星期四</label>&ensp;&ensp;
		        <label><input type="checkbox"  name="week" value="星期五">星期五</label>&ensp;&ensp;
		        <label><input type="checkbox"  name="week" value="星期六">星期六</label>&ensp;&ensp;
		        <label><input type="checkbox" name="week" value="星期日">星期日</label>
	</p>
	<p class="count"><span>考勤时段:&ensp;&ensp;&ensp;<input type="time" class="timestart" ></span>&ensp;&ensp;
		<span>结束时间:&ensp;<input type="time" class="timeend" placeholder="结束时间"></span>
	</p>
	<p class="count countplace"></p>

	<p class="count">考勤范围:&ensp;&ensp;&ensp;
		<select class="seld">
			<option value="100">100</option>
			<option value="200">200</option>
			<option value="300">300</option>
			<option value="500">500</option>
		</select>
	</p>

		<div class="map">
			<input type='text' id="inputSearch" placeholder='请输入考勤地点'>
			<div id='container' style='width:650px; height:350px'> </div>
		</div>
	<p class="submit">保存</p>
</div>



<div class="clear"></div>



<script>
    var result = '${result}';
    result = JSON.parse(result);
</script>
<script src="pc/js/extends/jquery-1.11.2.min.js"></script>
<script src="pc/js/extends/bootstrap-datetimepicker.min.js"></script>
<script src="pc/js/extends/bootstrap-datetimepicker.zh-CN.js"></script>


<script src="pc/js/extends/jquery.page.js"></script><!--翻页插件-->

<script src="pc/js/cores/Alert.js"></script><!--弹出盒-->
<script src="pc/js/cores/public.js"></script><!--公共-->

<script src="pc/js/extends/trumbowyg.js"></script><!--编辑器插件-->
<script src="pc/js/extends/trumbowyg.base64.min.js"></script><!--编辑器插件-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1c42917d4f8f616b021660159bcc1e64"></script>

<script>


	$(function(){
		var map, marker,longitude,latitude,switchOn,flag;
		let infos = []
		var baseTable=[];
		let self = this
		var confirm1 = new Confirm;
		var Alert1 = new Alert;
		var Alert2 = new Alert;
		var loading1 = new Loading();//监控全局ajax添加loading
		loading1.init();
		//console.log(result.paramData.courseId,444)
		get()
		//获取值
		function get(){
			$.ajax({
				type: "get",
				url: "attendance-mobile/config?classId="+result.paramData.classId+"&courseId="+result.paramData.courseId,
				contentType:"application/json;charset=utf-8",
				success: function(data, status, xhr) {
					if(data.code == 200) {
						switchOn = data.data.switchOn;
						if (data.data.startTime != null) {
							$('.datestart').val(data.data.startTime)
						}
						if (data.data.endTime != null) {
							$('.datesend').val(data.data.endTime)
						}
						if (data.data.info != null && data.data.info != undefined && data.data.info.length > 0 ) {

							for (let i = 0; i < data.data.info.length; i++) {
								//设置时间
								$('.timestart').val(data.data.info[0].startTime)
								$('.timeend').val(data.data.info[0].endTime)
								//距离
								$('.seld').val(data.data.info[0].distance)
								//星期

								$("input[name='week'][value=" + data.data.info[i].week + "]").attr("checked", true);
								//经纬度
								if(data.data.info[0].longitude != null && data.data.info[0].longitude != undefined){
									longitude = data.data.info[0].longitude
									latitude = data.data.info[0].latitude

									$('.countplace').html('考勤地点:&ensp;<span class="place">修改地点</span>')
								}else {
									$('.countplace').html('考勤地点:&ensp;<span class="place">设置地点</span>')
								}

							}

						} else {

							$('.countplace').html('考勤地点:&ensp;<span class="place">设置地点</span>')
						}

					}


				},
				error: function(data, status, xhr) {
					//loading1.hide();
					var json = JSON.stringify({
						"pageName": "error"
					});


				}
			});
		}
		//点击保存
		$('.submit').click(function() {

			loading1.show();
			//经纬度
			if(longitude ==  undefined || latitude == undefined){
				loading1.hide();
				Alert1.content = "请输入位置";
				Alert1.init();
				Alert1.show();
				return;
			}
			var  obj = document.getElementsByName("week");

			for(let i=0;i<obj.length;i++){
				if(obj[i].checked){
					//console.log(obj[i]);
					baseTable.push(obj[i].value);
				}
			}
			//console.log(baseTable.length,11)
			//是否为空
			if($('.datestart').val() == ''){
				loading1.hide();
				Alert1.content = "请输入手机考勤日期";
				Alert1.init();
				Alert1.show();
				return
			}
			if($('.timestart').val() == '' || $('.timeend').val() == '' ){
				loading1.hide();
				Alert1.content = "请输入手机考勤时段";
				Alert1.init();
				Alert1.show();
				return;
			}
			if(flag){
				loading1.hide();
				Alert1.content = "请输入位置";
				Alert1.init();
				Alert1.show();
				return
			}
           
			// var ids = [];
			//
			// $("input[name='week']:checked").each(function(i){
			// 	ids = [];
			// 	ids.push($(this).val())
			//
			//
			// })

			if(baseTable.length <= 0){
				loading1.hide();
				Alert1.content = "请输入手机考勤星期";
				Alert1.init();
				Alert1.show();
				return;
			}
			//console.log(baseTable,858)
			for(let i =0; i<baseTable.length; i++){

				let json = {}
				json.week = baseTable[i]
				json.distance = $('.seld').val()
				json.endTime = $('.timeend').val()
				json.startTime = $('.timestart').val()
				json.position = ''
				json.longitude =longitude
				json.latitude =latitude
				infos.push(json)
			}

			var parameter = {
				"endTime": $('.datesend').val(),
				"startTime": $('.datestart').val(),
				"courseId":result.paramData.courseId,
				"classId" :result.paramData.classId,
				"info" :infos,
				"switchOn" :switchOn
			};
			$.ajax({
				type: "post",
				url: "attendance-mobile/config/update",
				contentType:"application/json;charset=utf-8",
				async: true,
				data: JSON.stringify(parameter),
				success: function(data, status, xhr) {
					loading1.hide();
					if(data.code == 200){
						loading1.hide();
                       //跳转
						var json = JSON.stringify({
							"pageName": "phone",
							"paramData": {
								"courseId": result.paramData.courseId,
								"classId": result.paramData.classId,

							}
						});

						window.location.href = "skipPage?jsonStr=" + json;
					}
				},
				error: function(data, status, xhr) {
					//loading1.hide();
					var json = JSON.stringify({
						"pageName": "error"
					});


				}
			});

		})

		//点击设置地点
		$('body').on('click','.place',function(){
			baseTable = []
			//console.log(baseTable.length,4111)
			 //弹出地图
			$('.map').show()
			//地图
			 map = new AMap.Map('container', {
				resizeEnable: true,
				zoom: 14,
			})
			map.on('click', function(e) {
				map.clearMap();
				marker = new AMap.Marker({
					map : map,
					position : [ e.lnglat.getLng(), e.lnglat.getLat() ]
				});

			});

			search();
			// 查询
			function search(){
				AMap.plugin([ 'AMap.Autocomplete', 'AMap.PlaceSearch' ],
					function() {
						var autoOptions = {
							city : "北京", //城市，默认全国
							input : "inputSearch"//使用联想输入的input的id
						};
						autocomplete = new AMap.Autocomplete(autoOptions);
						var placeSearch = new AMap.PlaceSearch({
							city : '北京',
							map : map,
							pageSize:1,
							pageIndex:1
						})
						AMap.event.addListener(autocomplete, "select",
								function(e) {
							      // alert(JSON.stringify(e.poi))
									if(e.poi.location == undefined){
										flag = true
										Alert1.content = "未检索到该位置";
										Alert1.init();
										Alert1.show();
										return
									}
									//console.log(e,121)
									//console.log(e.poi.location.lng,888)
									//console.log(e.poi.location.lat,77)
									flag = false
									longitude = e.poi.location.lng
									latitude = e.poi.location.lat
									//TODO 针对选中的poi实现自己的功能
									placeSearch.setCity(e.poi.adcode);
									placeSearch.search(e.poi.name);
								}
						);
					});
			}

		})

        //点击上一页
		$('.looktg').click(function(){
			var json = JSON.stringify({
				"pageName": "phone",
				"paramData": {
					"courseId": result.paramData.courseId,
					"classId": result.paramData.classId,

				}
			});
			window.location.href = "skipPage?jsonStr=" + json;
		})
	});



	//设置
	// $(function(){
	//     getTeacherPSData()
	// });
	// function getTeacherPSData(){
    //     $.ajax({
    //         type: "get",
    //         url: "querySkillInfo?skillId",
    //         success: function(data, status, xhr) {
    //             if(data.code == 200){
    //                 data = data.data;
	// 			}
    //             $.each(data,function(i,d){
    //                 let oLi = $("<li></li>");
    //                 let div = $("<div></div>").addClass("post-skills-item").addClass("post-i-c"+ (i%8+1));
    //                 let divTitle = $("<div></div>").addClass("post-skills-title").html(d.name);
    //                 let aLink = $("<a href='javascript:;'>详情</a>").addClass("post-skills-more").click(function(){
    //                     goPostDetails(d.id)
	// 				});
    //                 div.append(divTitle,aLink);
    //                 oLi.append(div);
    //                 $(".post-skills-list").append(oLi);
	// 			});
    //         },
    //         error: function(data, status, xhr) {
    //             //loading1.hide();
    //             var json = JSON.stringify({
    //                 "pageName": "error"
    //             });
    //             //window.location.href = "skipPage?jsonStr=" + json;
	//
    //         }
    //     });
	//}
</script>
</body>

</html>